$main-color: #004892; // 主色调
$input-bg-default-color: #fcfcf9; //输入框内背景色
$input-border-default-color: #bdbcbb; // 输入框默认边框颜色
$disable-bg-color: #d8d8d8; //禁用组件 背景色

// 盒子边框
.global_box_shadow {
  border-radius: 16px;
  background-color: #f5f3ef;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%), 0 1px 35px 0 hsl(0deg 0% 100% / 56%);
  padding: 16px 10px;
}

// 分割线线
.global_hr {
  width: 100%;
  height: 2px;

  background-color: #d7d7d8;
  padding: 0;
  margin: 0;
}

// 按钮 tabs  自定义
.global_tabs {
  height: 58px;
  margin-left: 20px;
  margin-right: 20px;
  box-sizing: border-box;
  span {
    font-weight: 500;
    font-size: 16px;
    color: #999999;
    display: inline-block;
    // width: 75px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: solid 1px #bbc7d5;
    cursor: pointer;
    &:nth-child(1) {
      border-radius: 4px 0 0 4px;
      border-right: none;
    }
    &:nth-child(2) {
      border-radius: 0 4px 4px 0;
      border-left: none;
    }
    &.active {
      background-color: #004892;
      color: #fff;
    }
  }
  .active {
    background-color: #004892;
    color: #fff;
  }
}

// 一级页面tabs 自定义
.global_first_tabs {
  display: flex;
  align-items: center;
  padding: 0 15px;
  height: 50px;
  background-color: #f5f3ef;
  border-radius: 16px;
  border: solid 1px #fff;
  box-shadow: 0 0 10px rgba($color: #000, $alpha: 0.16);

  .global_title_label {
    padding: 3px 30px;
    margin: 0 15px;
    font-size: 20px;
    color: #8a8888;
    border-bottom: 2px solid transparent;
    cursor: pointer;

    &.active {
      color: #323232;
      border-color: #004892;
      font-weight: bold;
    }
  }
}

// =================================== 按钮

.el-button {
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
  padding: 0 20px;
  i,
  span {
    height: 32px;
    font-size: 14px;
    line-height: 32px;
  }
  // 默认
  &.el-button--default {
    background-color: $input-bg-default-color;
    border: solid 1px $input-border-default-color;
    color: #323232;
    &:active,
    &:hover,
    &:focus {
      background-color: $input-bg-default-color;
      border-color: #3e83d8;
      color: $main-color;
    }
  }
  // 主要
  &.el-button--primary {
    background-color: $main-color;
    border: solid 1px $main-color;
    color: #fff;
    &:active,
    &:hover,
    &:focus {
      background-color: #6da1f0;
      border-color: #6da1f0;
    }
  }
  // 禁用
  &.is-disabled {
    background-color: $disable-bg-color;
    border: solid 1px $disable-bg-color;
    color: #ffffff;
    &:active,
    &:hover,
    &:focus {
      background-color: $disable-bg-color;
      border: solid 1px $disable-bg-color;
      color: #ffffff;
    }
  }
  // 文字按钮
  &.el-button--text {
    color: $main-color;

    &:active,
    &:hover,
    &:focus {
      color: $main-color;
      text-decoration: underline;
    }

    &.is-disabled {
      color: $disable-bg-color;
      border: none;
      background-color: transparent;
      &:active,
      &:hover,
      &:focus {
        border: none;
        background-color: transparent;
      }
    }
  }
}

// =================================== 消息提示框样式
.el-message {
  height: 60px;
  border-radius: 10px;
  font-family: Alibaba-PuHuiTi-M;
  .el-message__content,
  .el-message__icon {
    font-size: 24px;
  }
  // 成功
  &.el-message--success {
    background-color: #9bf6de;
    color: #28a986;
  }
  // 告警
  &.el-message--warning {
    background-color: #f2e5b0;
    color: #9b8352;
  }
  // 普通
  &.el-message--info {
    background-color: $disable-bg-color;
    color: #8a8888;
  }
  // 错误
  &.el-message--error {
    background-color: #f8d6d6;
    color: #de5d5b;
  }
}

// =================================== 输入框
.el-input {
  height: 30px;
  line-height: 1;
  .el-input__inner {
    width: 100%;
    height: 100%;
    background-color: $input-bg-default-color;
    border-radius: 4px;
    border: solid 1px $input-border-default-color;
    &:hover,
    &:focus {
      border-color: $main-color;
    }
  }
  .el-input__icon {
    line-height: 1;
  }
}

// 带 加减按钮的输入框
.el-input-number {
  .el-input-number__increase,
  .el-input-number__decrease {
    line-height: 27px !important;
  }
  // 右布局
  &.is-controls-right {
    .el-input-number__increase,
    .el-input-number__decrease {
      line-height: 15px !important;
    }
  }
}

// =================================== 下拉选择
.el-select {
  // 普通
  .el-input {
    height: 30px;
    line-height: 1;
    .el-input__inner {
      width: 100%;
      height: 100%;
      background-color: $input-bg-default-color;
      border-radius: 4px;
      border: solid 1px $input-border-default-color;
      &:hover {
        border-color: $main-color;
      }
    }
    .el-input__icon {
      line-height: 1;
    }
    &.is-disabled {
      .el-input__inner {
        background-color: $disable-bg-color;
        border: solid 1px $disable-bg-color;
      }
      // placeholder 文字颜色
      .el-input__inner::placeholder {
        color: #fff;
      }
      /* 谷歌 */
      .el-input__inner::-webkit-input-placeholder {
        color: #fff;
      }
      /* 火狐 */
      .el-input__inner:-moz-placeholder {
        color: #fff;
      }
      /*ie*/
      .el-input__inner:-ms-input-placeholder {
        color: #fff;
      }
    }
  }
}

// 下拉框弹出层
.el-select-dropdown.el-popper {
  background-color: $input-bg-default-color;
  border: solid 1px $input-border-default-color;
  color: #323232;
  line-height: 48px;
  .el-select-dropdown__item {
    color: #323232;
    font-size: 14px;
  }
  .el-select-dropdown__item:hover {
    background-color: #f5f7fa;
    color: #1569bd;
  }
  .el-select-dropdown__item.hover {
    background-color: #f5f7fa;
  }

  .el-select-dropdown__item.selected {
    color: #1569bd;
  }
}

// ===================================  开关
.el-switch {
  // 关闭
  .el-switch__core {
    width: 32px !important;
    height: 16px !important;
    background-color: #bdbdbd;
    border-radius: 8px;
    border: solid 1px $input-border-default-color;
  }
  // 打开
  &.is-checked {
    .el-switch__core {
      background-color: $main-color;
      border-radius: 8px;
      border: solid 1px $main-color;
    }
    .el-switch__core:after {
      margin-left: -13px;
    }
  }
  //圆球大小
  .el-switch__core:after {
    width: 12px;
    height: 12px;
  }
  // 选中文字颜色
  .el-switch__label.is-active {
    color: $main-color;
  }

  // 禁用
  &.is-disabled {
    .el-switch__core {
      width: 32px;
      height: 16px;
      background-color: $disable-bg-color;
      border-radius: 8px;
      border: solid 1px $disable-bg-color;
    }

    .el-switch__label {
      color: $disable-bg-color;
    }
  }
}

// =================================== 多选框
.el-checkbox {
  // 未选中
  // 聚焦时border
  .el-checkbox__inner:hover {
    border-color: $main-color;
  }
  .el-checkbox__input.is-focus {
    .el-checkbox__inner {
      border-color: $main-color;
    }
  }
  // 选中
  &.is-checked {
    .el-checkbox__input {
      .el-checkbox__inner {
        background-color: $main-color;
        border: solid 1px $main-color;
      }
    }
    .el-checkbox__label {
      color: $main-color;
    }
  }
  // 禁用
  &.is-disabled {
    .el-checkbox__inner {
      background-color: $disable-bg-color;
    }
    // 文字颜色
    .el-checkbox__label {
      color: $disable-bg-color !important;
    }
    // 聚焦时border
    .el-checkbox__inner:hover {
      border-color: $disable-bg-color;
    }
    // 聚焦时border
    .el-checkbox__input.is-focus {
      .el-checkbox__inner {
        border-color: $disable-bg-color;
      }
    }
  }
}

// =================================== 单选框
.el-radio {
  // 未选中
  .el-radio__inner:hover {
    border: solid 1px $main-color;
  }
  // 选中
  &.is-checked {
    .el-radio__input.is-checked .el-radio__inner {
      background-color: #fff;
      border-color: $main-color;
      &::after {
        width: 8px;
        height: 8px;
        background-color: $main-color;
      }
    }
    .el-radio__label {
      color: $main-color;
    }
  }
}

// =================================== 多行文本输入框
.el-textarea {
  .el-textarea__inner {
    background-color: $input-bg-default-color;
    &:focus {
      border-color: $main-color;
    }
  }
}

// =================================== 日期/时间/日期范围
// 日期范围
.el-date-editor {
  &.el-date-editor--daterange,
  &.el-date-editor--datetimerange,
  &.el-date-editor--timerange {
    height: 30px;
    background-color: $input-bg-default-color;
    border-radius: 4px;
    border: solid 1px $input-border-default-color;

    &.is-active {
      border-color: $main-color;
    }
    &.is-disabled {
      background-color: $disable-bg-color;
      .el-range-input {
        background-color: $disable-bg-color;
        &::placeholder {
          color: #fff;
        }
      }
    }
    // icon
    .el-input__icon,
    .el-range-separator {
      line-height: 22px;
      color: #808080;
      // margin-left: 0;
    }
    .el-range-separator {
      padding: 0;
    }
  }
}

// 时间范围/日期选择- 弹出层
.el-picker-panel {
  .el-date-picker__header-label {
    &:hover {
      color: $main-color;
    }
  }
  .el-picker-panel__content {
    .cell:hover {
      color: $main-color;
    }

    .el-month-table td.current:not(.disabled) .cell {
      color: #fff;
      border: 1px solid $main-color;
      background-color: $main-color;
      border-radius: 4px;
    }
  }

  .popper__arrow::after {
    border-bottom-color: #f5f3ef !important;
  }

  .available {
    div span {
      border: 1px solid transparent;
    }
  }
  .available:hover {
    div span {
      color: $main-color;
      border: 1px solid $main-color;
      border-radius: 4px;
    }
  }
  // 开始时间  结束时间
  .available.start-date,
  .available.end-date,
  .available.current {
    div span {
      background-color: $main-color;
      border-radius: 4px;
      color: #fff;
    }
  }
}

// 时间选择-弹出层
.el-time-panel {
  .popper__arrow::after {
    border-bottom-color: #f5f3ef !important;
  }
  .el-time-panel__footer {
    .el-time-panel__btn.confirm {
      color: $main-color;
    }
  }
}

// ===================================  el-card 卡片
.el-card {
  border: solid 1px #dbe0ea;
  background-color: #f5f3ef;
  border-radius: 16px;
  box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%), 0 1px 35px 0 hsl(0deg 0% 100% / 56%);
  .el-card__header {
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    color: #000;
    padding: 0 20px 0 30px;
    background-color: #fff;
    display: flex;
    position: relative;
    &::before {
      display: inline-block;
      content: " ";
      width: 5px;
      height: 24px;
      margin-top: 14px;
      margin-right: 10px;
      background-color: $main-color;
      border-radius: 3px;
    }
    .el-button.el-button--text {
      font-size: 24px;
      color: #000;
      line-height: 30px;
      position: absolute;
      right: 10px;
    }

    .el-card__body {
      background-color: #f5f3ef;
      padding: 10px 20px 20px 20px;
    }
  }
}

// =================================== el-dialog 弹出层
.el-dialog {
  background-color: #f5f3ef;
  border-radius: 16px;
  border: solid 1px #ffffff;
  // 头部
  .el-dialog__header {
    height: 50px;
    line-height: 50px;
    // background-color: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 0 20px;
    .el-dialog__title {
      line-height: 50px;
      display: flex;
      align-items: center;
      /*  &::before {
        display: inline-block;
        content: " ";
        width: 5px;
        height: 24px;
        margin-right: 10px;
        background-color: $main-color;
        border-radius: 3px;
      } */
    }
    // 关闭 icon
    .el-dialog__close.el-icon.el-icon-close {
      &:hover {
        color: $main-color;
      }
    }
  }
  // 内容
  .el-dialog__body {
    padding: 10px 20px 20px 20px;
  }
  // 底部
  .el-dialog__footer {
    height: 50px;
    padding: 10px 30px;
    background-color: #edece3;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}

// 特殊样式 dialog 全屏
.el-dialog.dia-score-detail {
  margin-top: 0 !important;
  height: 100vh;
  .el-dialog__header {
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 0 20px;
    .el-dialog__title {
      line-height: 50px;
      display: flex;
      align-items: center;
      position: relative;
      padding-left: 20px;
      &::before {
        display: inline-block;
        content: " ";
        width: 5px;
        height: 24px;
        position: absolute;
        top: 12px;
        left: 10px;
        background-color: $main-color;
        border-radius: 3px;
      }
    }
    // 关闭 icon
    .el-dialog__close.el-icon.el-icon-close {
      &:hover {
        color: $main-color;
      }
    }
  }
  .el-dialog__body {
    padding: 10px 0;
    height: calc(100% - 70px);
  }

  .config-box {
    height: calc(100% - 60px);

    .left_nav {
      height: 100%; // todo 删掉
    }
  }
}

// =================================== v-loading 遮罩层
.el-loading-mask {
  .el-loading-spinner {
    .path {
      stroke: $main-color;
    }
    &::after {
      display: block;
      content: "正在加载中...";
      color: $input-border-default-color;
    }
  }
}

// =================================== el-table 表格
.el-table {
  //表头
  .el-table__header-wrapper {
    // height: 50px;
    // line-height: 50px;
    padding: 0;
    .el-table__header {
      .is-sortable.ascending {
        .ascending {
          border-bottom-color: $main-color;
        }
      }
      .is-sortable.descending {
        .descending {
          border-top-color: $main-color;
        }
      }
      tr th {
        height: 50px;
        line-height: 50px;
        padding: 0;
        background-color: #d1e7f3;
        color: #323232;
        &.el-table-column--selection {
          .el-checkbox {
            .el-checkbox__input {
              &.is-checked,
              &.is-indeterminate {
                // 表头 全选框样式
                .el-checkbox__inner {
                  background-color: $main-color;
                  border-color: $main-color;
                }
              }
            }
          }
        }
      }
    }
  }
  // 表格 内容
  .el-table__body-wrapper {
    // 行
    .el-table__row {
      // 斑马条纹
      &.el-table__row--striped {
        background-color: #f1f9fd;
      }
      // 行hover
      &:hover td {
        background-color: #f1f9fd;
      }
    }
  }

  // 侧边 固定
  .el-table__fixed {
    box-shadow: 0 0 10px rgb(0 0 0 / 12%);
    border-right: 1px solid #fff;
  }
  .el-table__fixed-right,
  .el-table__fixed {
    // 避免住 scrollbar
    height: calc(100% - 8px) !important;
    .el-table__header {
      tr,
      tr th {
        height: 51px !important;
        padding: 0;
        background-color: #f1f9fd;
        .cell {
          text-align: center;
        }
      }
    }
    .el-table__fixed-body-wrapper {
      background: #fff;
    }
  }

  .el-table__fixed-right-patch {
    background-color: #d5e6f2;
  }
}

// =================================== tab 标签页
.el-tabs {
  background-color: #f5f3ef;
  border-radius: 16px;
  border: solid 1px #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16),
    inset 0px 1px 35px 0px #ffffff;
  // 头部
  .el-tabs__header {
    height: 50px;
    padding: 0 20px;
    margin-bottom: 0;
    font-size: 20px;
    background-color: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;

    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }

    &.is-top {
      padding-top: 5px;
    }
    .el-tabs__active-bar {
      background-color: $main-color;
    }
    .el-tabs__item {
      color: #8a8888;
      font-size: 20px;
      padding: 0 20px;
      &.is-active {
        color: #000;
      }
    }
  }
  // 内容
  .el-tab-pane {
    padding: 20px;
    background-color: #f5f3ef;
    font-size: 14px;
  }
}

// =================================== 穿梭框
.el-transfer {
  .el-transfer__button:first-child {
    margin-bottom: 10px;
  }
}

// =================================== 穿梭框
